<template>
  <div>
    <oolongTable border :context="self" :columns="columns7" :data="data6"></oolongTable>
  </div>
</template>
<script>
  import '../assets/styles/index.less'
  import oolongDialog from '../components/dialog'

  export default {
    components: {
      oolongDialog
    },
    data () {
      return {
        oolong: "",
        self: this,
        columns7: [
          {
            title: '姓名',
            key: 'name',
            render (row, column, index) {
              return `<oolong-icon type="person"></oolong-icon> <strong>${row.name}</strong>`;
            }
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render (row, column, index) {
              return `<oolong-button type="primary" size="small" @click="show(${index})">查看</oolong-button> <oolong-button type="error" size="small" @click="remove(${index})">删除</oolong-button>`;
            }
          }
        ],
        data6: [
          {
            name: '王小明',
            age: 18,
            address: '北京市朝阳区芍药居'
          },
          {
            name: '张小刚',
            age: 25,
            address: '北京市海淀区西二旗'
          },
          {
            name: '李小红',
            age: 30,
            address: '上海市浦东新区世纪大道'
          },
          {
            name: '周小伟',
            age: 26,
            address: '深圳市南山区深南大道'
          }
        ]
      }
    },
    methods: {
      show (index) {
        alert("show");
        oolongDialog.info({
          title: '用户信息',
          content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
        })
      },
      remove (index) {
        this.data6.splice(index, 1);
      },

    }
  }
</script>
